<template>
  <div class="app-msg">
    <div class="tips">
      <i class="V7_iconfont V7_iconV7tubiao_tishi"></i>
        <span>以上信息填写后，不允许修改，请谨慎操作！</span>
    </div>
     <el-form class="m7-form" label-position="top" :rules="rules" :model="formData" size="mini" ref="formRef">
       <el-form-item prop="appName">
          <div class="label">应用名称<span class="star">*</span></div>
          <el-input v-model="formData.appName" :disabled="message.appName ? true : false" size="mini"></el-input>
        </el-form-item>
        <el-form-item prop="appId">
          <div class="label">AgentId(应用ID)<span class="star">*</span>
            <el-tooltip class="item" effect="dark" content="登录企业微信管理后台，点击【应用管理】-【应用】，找到七陌代创建的应用，进入应用详情，即可查看Agentld" placement="right">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></span>
            </el-tooltip>
          </div>
          <el-input v-model="formData.appId" size="mini" :disabled="message.appId ? true : false"></el-input>
        </el-form-item>
        <el-form-item prop="appLogo">
          <div class="label">应用Logo<span class="star">*</span>
            <el-tooltip class="item" effect="dark" content="企业微信应用上线后的logo（正方形 建议使用750*750，1M以内的jpg、png图片）" placement="right">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></span>
            </el-tooltip>
          </div>
          <el-upload
            class="upload-demo"
            drag
            :disabled="message.appLogo ? true : false"
            :before-upload="beforeUpload"
		        :show-file-list="false"
            :on-success="handleSuccess"
            accept=".jpg, .png"
            :http-request="uploadRequest"
            action="">
            <img style="max-width: 100%;" :src="formData.appLogo" class="avatar" v-if="formData.appLogo">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <a v-if="formData.appLogo" download  :href="formData.appLogo.replace('http://', 'https://') + '?attname=' + logoName" target="_blank">下载</a>
        </el-form-item>
        <el-form-item prop="appDesc">
          <div class="label">应用简介<span class="star">*</span>
            <el-tooltip class="item" effect="dark" content="企业微信应用上线后的简介(如为**商品提供售前咨询)" placement="top">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></span>
            </el-tooltip>
          </div>
          <el-input
            type="textarea"
            :disabled="message.appDesc ? true : false"
            :autosize="{ minRows: 2 }"
            placeholder="请输入应用简介"
            size="mini"
            v-model="formData.appDesc">
          </el-input>
        </el-form-item>
     </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { uploadQiniu } from '@/utils/upload'
import { commonAction } from '@/utils/common'
// eslint-disable-next-line no-restricted-imports
import { cloneDeep } from 'lodash'
@Component({
  name: 'AppMsg',
  components: {
  }
})
export default class AppMsg extends Vue {
  @Prop({ default: () => ({}) }) private message!: any;
  private formData = {
    appDesc: '',
    appName: '',
    appId: '',
    appLogo: ''
  }

  public rules = {
    appName: [{ required: true, trigger: 'blur', message: '请输入应用名称' }],
    appId: [{ required: true, trigger: 'blur', message: '请输入应用ID' }],
    appLogo: [{ required: true, trigger: 'blur', message: '请上传应用Logo' }],
    appDesc: [{ required: true, trigger: 'blur', message: '请输入应用简介' }]
  };

  @Watch('message', { immediate: true })
  public messageChange (val) {
    if (val.appId) {
      this.formData = cloneDeep(val)
    } else {
      this.formData = {
        appDesc: '',
        appName: '',
        appId: '',
        appLogo: ''
      }
    }
  }

  private get logoName () {
    if (this.formData.appLogo) {
      const arr = this.formData.appLogo.split('/')
      return arr[arr.length - 1]
    }
    return ''
  }

  private fileName = ''
  private $message: any;

  // 七牛上传
  public uploadRequest (request: any) {
    uploadQiniu({ type: 'crm', fileName: this.fileName }, request);
  }

  // 文件上传成功
  public handleSuccess (response, file, fileList) {
    this.formData.appLogo = response.domain + '/' + response.key;
    (this as any).$refs.formRef.validateField('appLogo');
  }

  // 上传之前校验
  public async beforeUpload (file) {
    this.fileName = file.name.replace(/\s/g, '')
    if (file.size > 1 * 1024 * 1024) {
      this.$message.error('附件大于1M');
      return false;
    }
    return true
  }

  public save () {
    if (this.message.appId) {
      this.$emit('next')
    } else {
      (this.$refs as any).formRef.validate((valid) => {
        if (valid) {
          commonAction({
            url: '/server-public/action/wx-suite/auth-info',
            method: 'post',
            data: this.formData
          }).then(res => {
            if (res.success) {
              this.$emit('next')
            }
          })
        } else {
          return false;
        }
      });
    }
  }
}
</script>
<style lang="stylus" scoped>
.star {
  color: #FC6C5C;
  margin-left: 5px;
  margin-right: 8px;
}
.label {
  font-weight: 400;
  color: #303753;
  font-size: 12px
  display: flex;
  align-items: center;
}
.app-msg
  width: 400px
  margin: 24px auto 0px auto;
.tips
  height: 34px;
  background: #FFFBE6;
  border-radius: 4px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #303753;
  line-height: 34px;
  padding-left 12px
  margin-bottom 10px
.V7_iconV7tubiao_tishi
  color: #FAAD14;
  font-size: 14px;
  margin-right: 7px
.V7_iconV7tubiao_bangzhu-42
  color: #B3B9C7
>>>.el-upload-dragger {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
